<template>
    <Card>
        <Row v-for="(r, k) in detail" :key="k" :gutter="20">
            <Col span="3" style="text-align:right;">
                属性名称：
            </Col>
            <Col span="6">
                <Input v-model="r.key" placeholder="例如：颜色" />
            </Col>
            <Col span="3" style="text-align:right;">
                属性值：
            </Col>
            <Col span="6">
                <Input v-model="r.value" placeholder="例如：血红" />
            </Col>
            <Col span="6">
                <Icon @click="remove(k)" type="ios-close-circle" :size="24" style="color:#d00;"/>
            </Col>
        </Row>
    </Card>
</template>

<script>
    export default {
        props: ['detail'],
        data() {
            return {
                
            }
        },
        created(){
            
        },
        methods: {
            //删除字段
            remove(i){
                this.detail.splice(i, 1);
            },
        }
    }
</script>
<style>
.custom p.title{height:33px!important;line-height: 33px!important;}
.custom p.title .ivu-input-wrapper{width:20%;}
.custom .title .ivu-icon{position:relative;height:28px;line-height:28px;}
.custom .ivu-card-head{padding:7px 16px;}
.custom .ivu-card-extra{top: 7px;}
</style>
